


<script setup>
import {ref, reactive} from 'vue'

const attributeName = ref('href')
const url = ref('www.baidu.com')
const eventName = ref('focus')
</script>

<template>
<!--
这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，
计算得到的值会被用作最终的参数。举例来说，
如果你的组件实例有一个数据属性 attributeName，其值为 "href"，
那么这个绑定就等价于 v-bind:href。
-->
<a v-bind:[attributeName]="url"> 1111 </a>

<!-- 简写 -->
<a :[attributeName]="url"> 2222 </a>

<a v-on:[eventName]="doSomething"> 333 </a>

<!-- 简写 -->
<a @[eventName]="doSomething">444</a>
</template>